<template>
	<view class="container">
		<view class="userinfo">
			<div style="text-align: center;">
				用户信息
			</div>
			<ul class="user-info-list">

				<!-- <li>用户名：{{userInfo.name}} <span class="balance">学号：{{userInfo.account}}</span></li> -->
				<li>用户名：{{userInfo.name}}</li>
				<li>学&nbsp&nbsp号：{{userInfo.account}}</li>
				<li>热水账户余额：<span style="color: red;">¥{{totalMoney}}</span></li>
			</ul>
		</view>
		<view class="context">

			<view v-if="item.code=='1'" class="form" v-for="item,index in data" :key="item.id"
				@click="navigateToDetail(index)">
				<img src="/static/image/浴室.png" class="bathroom" />
				<br />
				<text class="hot" v-if="item.code=='1'">浴室:{{ item.meterNumber.charAt(item.meterNumber.length - 1) }}
					{{item.state=="1"?"正常":"异常"}}</text>
				<!-- <text class="cold"
					v-if="item.code=='2'">冷水:{{ item.meterNumber.charAt(item.meterNumber.length - 1) }}</text>
				<view class="number">{{ number }}</view> -->

			</view>
			<view v-if="!data" style="display: flex;justify-content: space-between;width: 100%;">
				<img src="/static/image/浴室.png" v-for="item,index in 2" :key="index" style="background-color: grey;width:300rpx;border-radius: 15rpx;
		height:300rpx;padding: 15rpx;" @click="notUse" />
			</view>
		</view>
		<view class="flex-center">
			<!-- 跳转按钮 -->
			<button class="jump-button" @click="jumpToPage">热水充值</button>
			<button class="jump-button" @click="jumpToPage2">记录查询</button>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				info: "",
				number: "A101",
				data: '',
				userInfo: {},
				totalMoney: ''
			}
		},
		methods: {
			jumpToPage2() {
				// 使用uni-app的API进行页面跳转
				uni.navigateTo({
					url: '/pagesPerson/record/record' // 替换为目标页面的路径
				});
			},

			// 跳转页面方法
			jumpToPage() {
				// 使用uni-app的API进行页面跳转
				uni.navigateTo({
					url: '/waterElectric/chargeHotwater/chargeHotwater' // 替换为目标页面的路径
				});
			},
			notUse() {
				uni.showToast({
					icon: 'none',
					title: '暂不可用',
				})
			},
			check() {
				// 检查蓝牙适配器状态
				uni.getBluetoothAdapterState({
					success: function(res) {
						if (res.poweredOn) {
							// 蓝牙已开启
							console.log('蓝牙已开启，可以进行蓝牙操作');
						} else {
							// 蓝牙未开启，需要初始化
							console.log('蓝牙未开启，正在初始化...');
							uni.openBluetoothAdapter({
								success: function() {
									console.log('蓝牙初始化成功');
								},
								fail: function(err) {
									console.error('蓝牙初始化失败', err);
									// 处理失败的情况，例如提示用户手动开启蓝牙
								}
							});
						}
					},
					fail: function(err) {
						console.error('获取蓝牙适配器状态失败', err);
						// 处理失败的情况，例如提示用户检查蓝牙功能是否可用
						uni.openBluetoothAdapter({
							success: function() {
								console.log('蓝牙初始化成功');
							},
							fail: function(err) {
								console.error('蓝牙初始化失败', err);
								// 处理失败的情况，例如提示用户手动开启蓝牙
							}
						});
					}
				});
			},
			navigateToDetail(index) {
				console.log("点击事件：", this.data[index].UUID);
				uni.setStorageSync("device", this.data[index])
				uni.setStorageSync("UUID", this.data[index].UUID);
				uni.navigateTo({
					// url: "/blueTooth/comm/comm"
					url: "/blueTooth/on-off/on-off"
				});
			},

			getData() {
				let ss_mc = uni.getStorageSync("userInfo").ss_mc;
				console.log(ss_mc);
				ajax('/api/meter/getwaterinfo', 'POST', {
					SS_MC: ss_mc,
					userId: uni.getStorageSync("userId")
				}).then(data => {
					console.log('成功数据:', data);
					this.data = data.data.watermeter;
					this.totalMoney = data.data.totalMoney; // 正确更新totalMoney的值
				}).catch(error => {
					console.error('请求失败:', error);
				})
			}
		},

		onLoad() {
			this.check();
			this.userInfo = uni.getStorageSync("userInfo");
		},
		onShow() {
			let time = uni.getStorageSync("finalTime");
			if (time) {
				this.info = time;
			}
			this.getData();
		}
	}
</script>

<style scoped lang="scss">
	/* 父容器样式，使用flex布局使按钮居中 */
	.flex-center {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 10rpx;

		/* 设置高度为视口高度，使容器占满整个屏幕 */
		:first-child {
			/* 你的样式 */
			margin-right: 30rpx;
		}
	}


	/* 按钮样式 */
	.jump-button {
		flex: 1;

		background-color: #3ba757;
		/* 指定的绿色 */
		color: white;
		/* 文字颜色为白色 */
		padding: 10px 20px;
		/* 内边距 */
		text-align: center;
		/* 文字居中 */
		border: none;
		/* 无边框 */
		border-radius: 4px;
		/* 圆角边框 */
		font-size: 16px;
		/* 字体大小 */
		/* 不需要额外的居中样式，因为父容器已经是flex布局 */
	}

	.container {
		margin-top: 50rpx;
		/* margin-left: 50rpx; */
		padding: 0px 20px;
		display: flex;
		flex-direction: column;

	}

	.context {
		display: flex;
		justify-content: space-between;
	}

	.userinfo {
		padding: 10rpx;
		// text-align: center;
		background-color: #dedede;
		margin-bottom: 20rpx;
	}

	.userinfo div {
		text-align: center;
		margin-bottom: 10px;
	}

	.user-info-list {
		list-style: none;
		/* 移除列表项前的默认项目符号 */
		padding: 0;
		/* 移除默认的内边距 */
	}

	.user-info-list li {
		margin-bottom: 5px;
		margin-left: 5px;
		/* 为列表项之间添加一些间距 */
	}

	.balance {
		margin-left: 20%;

	}

	.form {
		display: flex;
		flex-direction: column;
		width: 300rpx;
		height: 400rpx;
		background-color: #3ba757;
		padding: 10rpx;
		justify-content: center;
		border-radius: 5px;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.bathroom {
		width: 300rpx;
		height: 300rpx;
	}

	.form-hot {
		/* width: 300rpx;
		height: 50px;
		line-height: 50px;
		margin-bottom: 10rpx;
		background-color: #3ba757;
		display: flex;
		justify-content: space-between;
		border-radius: 5px;
		text-align: center; */
	}

	.cold {
		margin-left: 20rpx;
	}

	.hot {
		margin-left: 20rpx;
		color: white;
	}

	.hotstate {
		margin-right: 20rpx;
	}

	.state {
		margin-right: 20rpx;
		width: 200rpx
	}
</style>